import { memo } from 'react'
import { Typography } from 'antd'
import { QuestionParagraphDefaultProps } from './interface'

const { Paragraph } = Typography

const QuestionParagraph = memo(props => {
  const { text = '', isCenter } = { ...QuestionParagraphDefaultProps, ...props }
  const textList = text.split('\n')

  return (
    <Paragraph
      style={{
        textAlign: isCenter ? 'center' : 'start',
        marginBottom: 0,
      }}
    >
      {textList.map((item, index) => (
        <span key={index}>
          {item}
          <br />
        </span>
      ))}
    </Paragraph>
  )
})

export default QuestionParagraph
